<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" layout:decorate="main"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <title>查询产品信息</title>
    <meta content="text/html; charset=utf-8">
    <link th:href="@{/localcss/crmlist.css}" href="../static/localcss/crmlist.css" rel="stylesheet">
</head>
<body>
<div layout:fragment="content">
    <div class="">
        <div class="clearfix"></div>
        <div class="row">
            <div class="col-md-12">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>
                            销售机会管理 <i class="fa fa-lk"></i>
                        </h2>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <form method="post" action="/product/list" th:action="@{/product/postProduct}">
                            <input type="button" value="关于">
                            <input type="button" value="查询" onclick="page(1)">
                            <input type="hidden" name="pageIndex" value="1"/>
                            <ul>
                                <li>
                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">名称</label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input name="prodName" type="text" th:value="${prodName}"
                                                   class="form-control col-md-6 col-xs-12" value="prodName">
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">型号</label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input name="prodType" type="text" th:value="${prodType}"
                                                   class="form-control col-md-6 col-xs-12" value="prodType">
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">等级/批次</label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input name="prodBatch" type="text" th:value="${prodBatch}"
                                                   class="form-control col-md-6 col-xs-12" value="prodBatch">
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                    <div class="x_content">
                        <p class="text-muted font-13 m-b-30"/>
                        <div id="datatable-responsive_wrapper"
                             class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                            <div class="row">
                                <div class="col-sm-12">
                                    <table id="datatable-responsive"
                                           class="table table-striped table-bordered dt-responsive nowrap dataTable no-footer dtr-inline collapsed"
                                           cellspacing="0" width="100%" role="grid"
                                           aria-describedby="datatable-responsive_info" style="width: 100%;">
                                        <thead>
                                        <tr role="row">
                                            <th class="sorting_asc" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="First name: activate to sort column descending"
                                                aria-sort="ascending">编号
                                            </th>
                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="Last name: activate to sort column ascending">
                                                名称
                                            </th>
                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="Last name: activate to sort column ascending">
                                                型号
                                            </th>
                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="Last name: activate to sort column ascending">
                                                等级/批次
                                            </th>
                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="Last name: activate to sort column ascending">
                                                单位
                                            </th>
                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="Last name: activate to sort column ascending">
                                                单价（元）
                                            </th>
                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="Last name: activate to sort column ascending">
                                                备注
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody id="tbody">

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="row" id="page">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script layout:fragment="js" th:inline="javascript">

    $(document).ready(function (){
        page(1);
    });
    function pageLimit(pageIndex){
        page(pageIndex);
    }
    function page(pageIndex){
        let frm = document.forms[0];
        let prodName = frm.prodName.value;
        console.log(prodName);
        $.ajax({
            type:"POST",
            url:"/crm/product/postProduct",
            data:{pageIndex:pageIndex,
                prodName:encodeURI(encodeURI(prodName)),
                prodType:encodeURI(encodeURI(frm.prodType.value)),
                prodBatch:encodeURI(encodeURI(frm.prodBatch.value))},
            success:function (data){
                $("#tbody").html("");
                let td = "";
                let dataJSON = JSON.parse(data);
                console.log(JSON.parse(data));
                for (let i = 0; i < dataJSON.records.length; i++){
                    td += "<tr role=\"row\" class=\"odd\"><td tabindex=\"0\" class=\"sorting_1\" >"+dataJSON.records[i].prodId+"</td>";
                    td += "<td>"+dataJSON.records[i].prodName+"</td>";
                    td += "<td>"+dataJSON.records[i].prodType+"</td>";
                    td += "<td>"+dataJSON.records[i].prodBatch+"</td>";
                    td += "<td>"+dataJSON.records[i].prodUnit+"</td>";
                    td += "<td>"+dataJSON.records[i].prodPrice+"</td>";
                    td += "<td>"+dataJSON.records[i].prodMemo+"</td>";

                }
                $("#tbody").html(td);

                $("#page").html("");
                let page = "<div class=\"col-sm-5\">" +
                    "<div class=\"dataTables_info\" id=\"datatable-responsive_info\"" +
                    " role=\"status\" aria-live=\"polite\">共<span>"+dataJSON.total+"</span>条记录" +
                    " <span>"+dataJSON.current+"</span>/<span>"+dataJSON.pages+"</span>页</div>" +
                    " </div>" +
                    " <div class=\"col-sm-7\">" +
                    " <div class=\"dataTables_paginate paging_simple_numbers\"" +
                    " id=\"datatable-responsive_paginate\">" +
                    " <ul class=\"pagination\">";
                if(dataJSON.current > 1){
                    page += " <li class=\"paginate_button previous\">" +
                        "<a href=\"#\" onclick=\"pageLimit(1);\"" +
                        "aria-controls=\"datatable-responsive\" data-dt-idx=\"0\"" +
                        " tabindex=\"0\">首页</a>" +
                        " </li>" +
                        " <li class=\"paginate_button \" }\"><a" +
                        " href=\"#\" onclick=\"pageLimit("+(dataJSON.current-1)+");\"" +
                        " aria-controls=\"datatable-responsive\" data-dt-idx=\"1\"" +
                        " tabindex=\"0\">上一页</a>" +
                        " </li>";
                }
                if(dataJSON.current < dataJSON.pages){
                    page += " <li class=\"paginate_button \"><a" +
                        " href=\"#\" onclick=\"pageLimit("+(dataJSON.current+1)+");\"" +
                        " aria-controls=\"datatable-responsive\" data-dt-idx=\"1\"" +
                        " tabindex=\"0\">下一页</a>" +
                        " </li>" +
                        " <li class=\"paginate_button next\"><a" +
                        " href=\"#\" onclick=\"pageLimit("+dataJSON.pages+");\"" +
                        " aria-controls=\"datatable-responsive\" data-dt-idx=\"7\"" +
                        "tabindex=\"0\">最后一页</a>" +
                        " </li>" +
                        " </ul>" +
                        " </div>" +
                        " </div>";
                }
                $("#page").html(page);
            },
            error:function (data){
                alert("对不起，获取数据失败！");
            }
        })
    }
</script>
</html>